import React from 'react'
import { Table, Button, Typography } from 'antd'
import { PlusOutlined, EditOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

const { Title } = Typography

// 模拟数据
const customerServiceData = [
  { key: '1', id: 'TK001', customer: '张三', status: '待处理', priority: '高', createdAt: '2023-05-01' },
  { key: '2', id: 'TK002', customer: '李四', status: '处理中', priority: '中', createdAt: '2023-05-02' },
  { key: '3', id: 'TK003', customer: '王五', status: '已解决', priority: '低', createdAt: '2023-05-03' },
  // 添加更多数据以测试滚动
  ...Array.from({ length: 15 }, (_, i) => ({
    key: `${i + 4}`,
    id: `TK${String(i + 4).padStart(3, '0')}`,
    customer: `客户${i + 4}`,
    status: ['待处理', '处理中', '已解决'][i % 3],
    priority: ['高', '中', '低'][i % 3],
    createdAt: `2023-05-${String((i % 30) + 1).padStart(2, '0')}`
  }))
]

const CustomerServicePage: React.FC = () => {
  const navigate = useNavigate();
  
  const customerServiceColumns = [
    { title: '工单号', dataIndex: 'id', key: 'id' },
    { title: '客户', dataIndex: 'customer', key: 'customer' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '优先级', dataIndex: 'priority', key: 'priority' },
    { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <span>
          <Button type="link" icon={<EditOutlined />} onClick={() => navigate('/customer-service/ticket/1')}>处理</Button>
        </span>
      ),
    },
  ]

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <Title level={3}>客服管理</Title>
        <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate('/customer-service/new')}>创建工单</Button>
      </div>
      <Table 
        dataSource={customerServiceData} 
        columns={customerServiceColumns} 
        pagination={{ pageSize: 10 }}
      />
    </div>
  )
}

export default CustomerServicePage